<template>
    <nav class="app-topnav">
        <div class="container">
            <ul>
                <template v-if="profile.token">
                    <li>
                        <router-link to="/member"
                            ><el-icon style="vertical-align: middle"
                                ><User /></el-icon
                            ><span> {{ profile.nickname }} </span></router-link
                        >
                    </li>
                    <li>
                        <a @click="logout()" href="javascript:;"
                            ><span>退出登录</span></a
                        >
                    </li>
                </template>
                <template v-else>
                    <li>
                        <router-link to="/login"
                            ><span>请先登录</span></router-link
                        >
                    </li>
                    <li>
                        <router-link to="/login"
                            ><span>免费注册</span></router-link
                        >
                    </li>
                </template>

                <li>
                    <router-link to="/member/order"
                        ><span>我的订单</span></router-link
                    >
                </li>
                <li>
                    <router-link to="/member"
                        ><span>会员中心</span></router-link
                    >
                </li>
                <li>
                    <router-link to="/member/help-center"
                        ><span>帮助中心</span></router-link
                    >
                </li>
                <li>
                    <a href="javascript:;"><span>商家入驻</span></a>
                </li>
                <li>
                    <a href="javascript:;"
                        ><el-icon style="vertical-align: middle"
                            ><Iphone /></el-icon
                        ><span> 手机版 </span></a
                    >
                </li>
            </ul>
        </div>
    </nav>
</template>
<script setup>
import { computed } from 'vue'
import { userStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const useUserStore = userStore()
const profile = computed(() => useUserStore.profile)

const logout = () => {
    useUserStore.setUser({})
    router.push('/login')
    ElMessage({
        type: 'warning',
        message: '成功退出！',
    })
}
</script>
<style lang="scss">
.app-topnav {
    width: 100vw;
    background: #5a4b3b;
    ul {
        display: flex;
        height: 30px;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 3px;
        li {
            a {
                transition: color 0.2s ease;
                span {
                    vertical-align: middle;
                }
                padding: 0 15px;
                color: #cdcdcd;
                line-height: 1;
                display: inline-block;
                vertical-align: middle;
                i {
                    font-size: 14px;
                    margin-right: 2px;
                }
                &:hover {
                    color: #da9233;
                }
            }
            ~ li {
                a {
                    border-left: 2px solid #666;
                }
            }
        }
    }
}
</style>
